<template>
	<view class="indexPage">
		<view class="banner">
			<!-- 顶部背景 -->
			<u-navbar
				title="首页"
				style="position: relative; z-index: 1"
				:fixed="false"
				:bgColor="'transparent'"
				:titleStyle="{
          color: '#fff',
          fontSize: '16px',
        }">
				<!-- 左侧扫码按钮 -->
				<template #left>
					<view class="scan-btn"></view>
				</template>
			</u-navbar>
			<image
				mode="widthFix"
				src="../../static/index/banner.png"
				class="bannerImg"></image>
		</view>
		<view class="content">
			<view class="hite">
				<image
					mode="widthFix"
					src="../../static/index/new.png"
					class="newImg"></image>
				<image
					mode="widthFix"
					src="../../static/index/hite.png"
					class="hiteImg"></image>
				<u-notice-bar
					:text="notedata"
					class="no-wrap"
					@click="handenoticeDetail()"
					direction="row"
					bgColor="none"
					color="#444444"></u-notice-bar>
			</view>
			<view class="listcont">
				<view
					class="list"
					v-for="(item, index) in list"
					@click="handeDetail(item.pages, item)">
					<image :src="item.image" class="imgs"></image>
					<view class="name">
						{{ item.title }}
					</view>
				</view>
			</view>
			<!-- 图片 -->
			<view class="platform">
				<image
					v-if="isCheck == 0"
					mode="widthFix"
					@click="handleOther"
					src="../../static/index/pingtai.png"
					class="platformImg"></image>
				<image
					v-if="isCheck == 0"
					mode="widthFix"
					@click="handPage"
					src="../../static/index/kuandai.png"
					class="platformImg"></image>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		getIndexData,
		isShowCheck
	} from "@/api/mainapi.js";
	import {
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				notedata: "",
				list: [{
					img: require("../../static/index/img1.png"),
					name: "最新公告",
					url: "/pages/notice/index",
				}, {
					img: require("../../static/index/img2.png"),
					name: "萧岗介绍",
					url: "/pages/agreement/index",
				}, {
					img: require("../../static/index/img3.png"),
					name: "附近商圈",
					url: "",
				}, {
					img: require("../../static/index/img4.png"),
					name: "便民广告",
					url: "",
				}, {
					img: require("../../static/index/img5.png"),
					name: "政务服务",
					url: "",
				}, {
					img: require("../../static/index/img6.png"),
					name: "互联网医院",
					url: "",
				}, {
					img: require("../../static/index/img7.png"),
					name: "敬请期待",
					url: "",
				}, {
					img: require("../../static/index/img8.png"),
					name: "宽带信息登记",
					url: "",
				}, ],
				isCheck: "",
			};
		},
		computed: mapGetters(["isLogin", "uid", "userInfo"]),
		onLoad() {},
		onShow() {
			this.getlist();
			this.isShowCheck();
		},
		onShareAppMessage() {
			return {
				title: '萧岗通',
				path: '/pages/index/index', // 分享路径
				imageUrl: '/static/index/banner.png' // 分享图片
			};
		},
		mounted() {},
		methods: {
			async isShowCheck() {
				const res = await isShowCheck();
				if (res.response.statusCode === 200) {
					this.isCheck = res.data.data.shequ_check;
				}
			},
			async getlist() {
				const res = await getIndexData();
				if (res.response.statusCode === 200) {
					// console.log(res.data.data, "res.data.data");
					this.notedata = res.data.data.notice;
					this.list = res.data.data.list;
				}
			},
			handenoticeDetail() {
				uni.navigateTo({
					url: "/pages/notice/index",
				});
			},
			handeDetail(url, item) {
				console.log(url, item, 23423);
				if (item.id == 3) {
					uni.navigateTo({
						url: "/pages/agreement/index?id=2",
					});
				} else if (item.id == 9) {
					if (uni.getStorageSync("userInfo")) {
						uni.navigateTo({
							url: url,
						});
					} else {
						uni.navigateTo({
							url: "/pages/login/login",
						});
					}
				} else if (item.id == 7) {
					wx.navigateToMiniProgram({
						appId: "wx753d89cad9761e41",
						path: "intel_hospital/drill/pages/drillPage/index?unitId=27014&from=scan_code&curtab=baiyunqu&code_id=27014005",
						extraData: {},
						success(res) {
							console.log("跳转成功", res);
						},
						fail(err) {
							console.error("跳转失败", err);
						},
					});
				} else if (item.id == 4) {
					wx.navigateToMiniProgram({
						appId: "wx01b44b81c8737e81",
						path: "pages/nearby-shop/nearby-shop",
						extraData: {},
						success(res) {
							console.log("跳转成功", res);
						},
						fail(err) {
							console.error("跳转失败", err);
						},
					});
				} else if (item.id == 5) {
					wx.navigateToMiniProgram({
						appId: "wx01b44b81c8737e81",
						path: "pages/notice/notice",
						extraData: {},
						success(res) {
							console.log("跳转成功", res);
						},
						fail(err) {
							console.error("跳转失败", err);
						},
					});
				}else {
					if (url) {
						uni.navigateTo({
							url: url,
						});
					} else {
						return uni.showToast({
							title: "敬请期待",
							icon: "none",
							duration: 2000,
						});
					}
				}
			},
			handleOther() {
				wx.navigateToMiniProgram({
					appId: "wx01b44b81c8737e81",
					path: "pages/index/index",
					extraData: {
						from: "原小程序",
						userId: 123,
					},
					success(res) {
						console.log("跳转成功", res);
					},
					fail(err) {
						console.error("跳转失败", err);
					},
				});
			},
			handPage() {
				uni.navigateTo({
					url: "/pages/index/broadband",
				});
			},
		},
	};
</script>
<style scoped lang="scss">
	.indexPage {
		.no-wrap {
			white-space: nowrap;
		}

		.banner {
			width: 100%;
			z-index: 0;
			height: 498rpx;

			/deep/ .u-navbar {
				position: relative;
				z-index: 1;
			}
		}

		.bannerImg {
			width: 100%;
			position: absolute;
			margin-top: -192rpx;
		}

		.content {
			position: absolute;
			background: #fff;
			width: 100%;
			border-radius: 24rpx;
			margin-top: -30rpx;
			z-index: 9;
			padding: 0 36rpx;
			box-sizing: border-box;

			/* 隐藏图标 */
			/deep/ .u-notice__left-icon {
				display: none;
			}
		}

		.hite {
			background: #f1f8ff;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			padding: 20rpx 20rpx;
			margin-top: 30rpx;

			.newImg {
				width: 52rpx;
			}

			.hiteImg {
				width: 30rpx;
				margin-left: 32rpx;
			}
		}

		.listcont {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}

		.list {
			width: 25%;
			text-align: center;
			margin-top: 46rpx;

			// margin-right: 46rpx;
			.name {
				font-size: 26rpx;
				margin-top: 10rpx;
			}

			.imgs {
				width: 96rpx;
				height: 96rpx;
			}
		}

		.platform {
			display: flex;
			justify-content: space-between;
			margin-top: 44rpx;

			.platformImg {
				width: 320rpx;
				height: 176rpx;
			}
		}
	}
</style>